<script setup>
import { ref } from "vue";
<<<<<<< HEAD
import { open } from '@tauri-apps/api/dialog';
import { invoke } from '@tauri-apps/api';
=======
import { open } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';
>>>>>>> v3.0

const selectedFilePath = ref("");
const res = ref("");

async function openDialog(event) {
  event.preventDefault();  // 阻止默认的表单提交行为
  // Open a selection dialog for image files
  const selected = await open({
    multiple: true,
    filters: [{
      name: 'Image',
      extensions: ['*']
    }]
  });
  console.log(selected)
  selectedFilePath.value = selected[0]
  // res.value = selectedFilePath.value
  invoke('add_resc', { name: selectedFilePath.value })
    // `invoke` returns a Promise
    .then((response) => {
      res.value = response
    })
}

async function start(){
  invoke('start', {})
}

const props = defineProps({
  showTerminal: Boolean
});

const emit = defineEmits(['toggleTerminal']);

function toggleTerminal() {
  emit('toggleTerminal');
}
</script>

<template>
  <div>
<<<<<<< HEAD
    <button @click="openDialog" :class="{ 'button1': true }">Select ELF file</button>
    <input type="text" :value="res" readonly :class="{ 'my-input': true }" />
    <button @click="start" :class="{ 'button2': true }">Start</button>
    <button @click="toggleTerminal">Toggle Terminal</button>
=======
    <div style="width: 100%; text-align: center; position: relative;">
      <!-- 原有按钮和输入框保持不变 -->
      <el-button @click="openDialog" type="primary" class="button1">上传文件</el-button>
      <el-input v-model="res" readonly style="width: 500px;" placeholder="请上传ELF文件或者Bin文件"/>
      <el-button @click="start" type="danger" class="button2">运行</el-button>
      <el-button @click="toggleTerminal" type="primary" class="button2">打开终端</el-button>
      
      <!-- 仅修改标题部分 - 靠右两行显示 -->
      <!-- <div style="
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        text-align: right;
      ">
        <div style="font-size: 20px; line-height: 1.2;">虚拟原型产品开发工具</div>
        <div style="font-size: 16px; line-height: 1.2; color: #666;">
          virtual HW product prototyping tool
        </div>
      </div> -->
    </div>
>>>>>>> v3.0
  </div>
</template>

<style scoped>
  div {
    display: flex; /* 使用 Flex 布局 */
    align-items: center; /* 垂直居中 */
  }

  .button1 {
<<<<<<< HEAD
    width: 170px;
    margin-right: 10px; 
=======
    width: 220px;
    margin-right: 10px;
>>>>>>> v3.0
  }

  .button2 {
    margin-left: 30px;
    background-color: red;
  }

  .my-input {
<<<<<<< HEAD
    width: 500px;
  }
</style>
=======
    width: 100px;
  }
</style>
>>>>>>> v3.0
